<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

        a {
            color: #666;
            text-decoration: none;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 0;
        }

        body {
            color: #666;
            font: 12px/180% Arial, Helvetica, sans-serif;
        }

        clearfix:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden
        }

        .clearfix {
            display: inline-table
        }

        * html .clearfix {
            height: 1%
        }

        .clearfix {
            display: block
        }

        * + html .clearfix {
            min-height: 1%
        }

        .fl {
            float: left;
        }

        .fr {
            float: right;
        }

        .catbox {
            width: 940px;
            margin: 0 auto;
        }

        .catbox table {
            text-align: center;
            width: 100%;
        }

        .catbox table th,
        .catbox table td {
            border: 1px solid #CADEFF;
        }

        .catbox table th {
            background: #e2f2ff;
            border-top: 3px solid #a7cbff;
            height: 30px;
        }

        .catbox table td {
            padding: 10px;
            color: #444;
        }

        .catbox table tbody tr:hover {
            background: RGB(238, 246, 255);
        }

        .checkbox {
            width: 60px;
        }

        .goods {
            width: 300px;
        }

        .goods span {
            width: 180px;
            margin-top: 20px;
            text-align: left;
            float: left;
        }

        .goods img {
            width: 100px;
            height: 80px;
            margin-right: 10px;
            float: left;
        }

        .price {
            width: 130px;
        }

        .count {
            width: 90px;
        }

        .count .add,
        .count input,
        .count .reduce {
            float: left;
            margin-right: -1px;
            position: relative;
            z-index: 0;
        }

        .count .add,
        .count .reduce {
            height: 23px;
            width: 17px;
            border: 1px solid #e5e5e5;
            background: #f0f0f0;
            text-align: center;
            line-height: 23px;
            color: #444;
        }

        .count .add:hover,
        .count .reduce:hover {
            color: #f50;
            z-index: 3;
            border-color: #f60;
            cursor: pointer;
        }

        .count input {
            width: 50px;
            height: 15px;
            line-height: 15px;
            border: 1px solid #aaa;
            color: #343434;
            text-align: center;
            padding: 4px 0;
            background-color: #fff;
            z-index: 2;
        }

        .subtotal {
            width: 150px;
            color: red;
            font-weight: bold;
        }

        .operation span:hover,
        a:hover {
            cursor: pointer;
            color: red;
            text-decoration: underline;
        }

        .foot {
            margin-top: 10px;
            color: #666;
            height: 48px;
            border: 1px solid #c8c8c8;
            background-color: #eaeaea;
            background-image: linear-gradient(RGB(241, 241, 241), RGB(226, 226, 226));
            position: relative;
            z-index: 8;
        }

        .foot div,
        .foot a {
            line-height: 48px;
            height: 48px;
        }

        .foot .select-all {
            width: 100px;
            height: 48px;
            line-height: 48px;
            padding-left: 5px;
            color: #666;
        }

        .foot .closing {
            border-left: 1px solid #c8c8c8;
            width: 100px;
            text-align: center;
            color: #000;
            font-weight: bold;
            background: RGB(238, 238, 238);
            cursor: pointer;
        }

        .foot .total {
            margin: 0 20px;
            cursor: pointer;
        }

        .foot #priceTotal,
        .foot #selectedTotal {
            color: red;
            font-family: "Microsoft Yahei";
            font-weight: bold;
        }

        .foot .selected {
            cursor: pointer;
        }

        .foot .selected .arrow {
            position: relative;
            top: -3px;
            margin-left: 3px;
        }

        .foot .selected .down {
            position: relative;
            top: 3px;
            display: none;
        }

        .show .selected .down {
            display: inline;
        }

        .show .selected .up {
            display: none;
        }

        .foot .selected:hover .arrow {
            color: red;
        }

        .foot .selected-view {
            width: 935px;
            border: 1px solid #c8c8c8;
            position: absolute;
            height: auto;
            background: #ffffff;
            z-index: 9;
            bottom: 48px;
            left: -1px;
            display: none;
        }

        .show .selected-view {
            display: block;
        }

        .foot .selected-view div {
            height: auto;
        }

        .foot .selected-view .arrow {
            font-size: 16px;
            line-height: 100%;
            color: #c8c8c8;
            position: absolute;
            right: 330px;
            bottom: -9px;
        }

        .foot .selected-view .arrow span {
            color: #ffffff;
            position: absolute;
            left: 0px;
            bottom: 1px;
        }

        #selectedViewList {
            padding: 10px 20px 10px 20px;
        }

        #selectedViewList div {
            display: inline-block;
            position: relative;
            width: 100px;
            height: 80px;
            border: 1px solid #ccc;
            margin: 10px;
            float: left;
        }

        #selectedViewList div img {
            width: 100px;
            height: 80px;
            margin-right: 10px;
            float: left;
        }

        #selectedViewList div span {
            display: none;
            color: #ffffff;
            font-size: 12px;
            position: absolute;
            top: 0px;
            right: 0px;
            width: 60px;
            height: 18px;
            line-height: 18px;
            text-align: center;
            background: #000;
            cursor: pointer;
        }

        #selectedViewList div:hover span {
            display: block;
        }
    </style>

</head>

<body>
<div class="catbox">

    <table id="cartTable">
        <thead>
        <tr>
            <th><label><input class="check-all check" type="checkbox"/>&nbsp;全选</label></th>
            <th>商品</th>
            <th>单价</th>
            <th>数量</th>
            <th>小计</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td class="checkbox"><input class="check-one check" type="checkbox"/></td>
            <td class="goods"><img src="img/cart1.jpg" alt=""/><span>Casio/卡西欧 EX-TR350</span></td>
            <td class="price">5999.88</td>
            <td class="count"><span class="reduce count-btn">-</span><input class="count-input" type="text" value="1"/><span
                    class="add count-btn">+</span></td>
            <td class="subtotal">5999.88</td>
            <td class="operation"><span class="delete">删除</span></td>
        </tr>
        <tr>
            <td class="checkbox"><input class="check-one check" type="checkbox"/></td>
            <td class="goods"><img src="img/cart2.jpg" alt=""/><span>Canon/佳能 PowerShot SX50 HS</span></td>
            <td class="price">3888.50</td>
            <td class="count"><span class="reduce count-btn">-</span><input class="count-input" type="text" value="1"/><span
                    class="add count-btn">+</span></td>
            <td class="subtotal">3888.50</td>
            <td class="operation"><span class="delete">删除</span></td>
        </tr>
        <tr>
            <td class="checkbox"><input class="check-one check" type="checkbox"/></td>
            <td class="goods"><img src="img/cart3.jpg" alt=""/><span>Sony/索尼 DSC-WX300</span></td>
            <td class="price">1428.50</td>
            <td class="count"><span class="reduce count-btn">-</span><input class="count-input" type="text" value="1"/><span
                    class="add count-btn">+</span></td>
            <td class="subtotal">1428.50</td>
            <td class="operation"><span class="delete">删除</span></td>
        </tr>
        <tr>
            <td class="checkbox"><input class="check-one check" type="checkbox"/></td>
            <td class="goods"><img src="img/cart4.jpg" alt=""/><span>Fujifilm/富士 instax mini 25</span></td>
            <td class="price">640.60</td>
            <td class="count"><span class="reduce count-btn">-</span><input class="count-input" type="text" value="1"/><span
                    class="add count-btn">+</span></td>
            <td class="subtotal">640.60</td>
            <td class="operation"><span class="delete">删除</span></td>
        </tr>
        </tbody>
    </table>

    <div class="foot" id="foot">
        <label class="fl select-all"><input type="checkbox" class="check-all check"/>&nbsp;全选</label>
        <a class="fl delete" id="deleteAll" href="javascript:;">删除</a>
        <div class="fr closing">结 算</div>
        <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
        <div class="fr selected" id="selected">已选商品<span id="selectedTotal">0</span>件<span
                class="arrow up">︽</span><span class="arrow down">︾</span></div>
        <div class="selected-view">
            <div id="selectedViewList" class="clearfix">
                <div><img src="img/cart1.jpg"><span>取消选择</span></div>
            </div>
            <span class="arrow">◆<span>◆</span></span>
        </div>
    </div>

</div>
<script type="text/javascript" src="./jquery2.2.0.js"></script>
<script>
// 全局变量
var checkOne = $('.check-one');// 获取单选按钮的集合
var checkAll = $('.check-all');// 全选按钮集合
var selectedTotal = $('#selectedTotal');// 统计选中商品的框框
var delAll = $('#deleteAll');// 全删除按钮
var del = $('.delete');// 单个删除按钮集合
var subtotal = $('.subtotal');// 总价的集合
var priceTotal = $('#priceTotal');// 总价显示框

// 初始化全选
(function autoCheckAll() {
    checkAll.attr('checked', true);
    checkOne.attr('checked', true);
})();

// 全部删除
delAll.on('click', function () {
    $('#cartTable tbody tr').remove();
});
// 单个删除
$(document).on('click', '.delete', function () {
    console.log($(this));
    $(this).parents('tr').remove();
    showTotalPrice();
    showNumber();
});

// 初始显示总价
showTotalPrice()
// 显示总价
function showTotalPrice() {
    var totalPrice = 0;//总价
    $('.subtotal').each(function (index, domEle) {
        totalPrice += parseFloat($(domEle).text());
    });
    priceTotal.text(totalPrice.toFixed(2));// toFixed(2)保留两位小数
};

//初始显示总数量
showNumber()
// 数量的增减，且显示对应小计和已选商品数量
// 更具选择数量进行商品数量显示
$('.count-input').on('change', function () {
    showNumber();
});
// 显示总数量
function showNumber() {
    var totalNumber = 0;
    $('.count-input').each(function () {
        totalNumber += parseInt($(this).val());
    });
    $('#selectedTotal').text(totalNumber)
}



$('.add').each(function () {
    $(this).on('click', function () {
        var newNumber = 0,
            oldNumber = parseInt($(this).prev().val()),
            subtotal = $(this).parent().next(),
            newSubtotal = 0;
        if (oldNumber >= 0) {
            $(this).parent().find('.reduce').text('-');
        } else {
            $(this).parent().find('.reduce').text('');
        }
        newNumber = oldNumber + 1;
        $(this).prev().val(newNumber);
        newSubtotal = (newNumber * parseFloat($(this).parent().prev().text())).toFixed(2);
        console.log(newSubtotal);
        subtotal.text(newSubtotal);
        showTotalPrice();
        showNumber();
    });
});

$('.reduce').each(function () {
    $(this).on('click', function () {
        var newNumber = 0,
            oldNumber = parseInt($(this).next().val()),
            subtotal = $(this).parent().next(),
            newSubtotal = 0;
        if (oldNumber <= 1) {
            $(this).text('')
        } else {
            $(this).text('-')
            newNumber = oldNumber - 1;
        }
        $(this).next().val(newNumber);
        newSubtotal = (newNumber * parseFloat($(this).parent().prev().text())).toFixed(2);
        console.log(newSubtotal);
        subtotal.text(newSubtotal);
        showTotalPrice();
        showNumber();
    });
});





</script>
</body>
</html>